@react-aria/overlays

What is @react-aria/overlays?

@react-aria/overlays is a library that provides accessible overlay components for React applications. It includes components for modals, popovers, and tooltips, ensuring they are accessible and follow best practices.

What are @react-aria/overlays's main functionalities?

Modal

This code demonstrates how to create a modal using @react-aria/overlays. It includes state management for opening and closing the modal, and ensures accessibility features like preventing background scroll and proper focus management.

import { useOverlayTriggerState } from '@react-stately/overlays';
import { OverlayContainer, OverlayProvider, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';

function ModalExample() {
  let state = useOverlayTriggerState({});
  return (
    <OverlayProvider>
      <button onClick={() => state.open()}>Open Modal</button>
      {state.isOpen && (
        <OverlayContainer>
          <ModalDialog onClose={state.close} />
        </OverlayContainer>
      )}
    </OverlayProvider>
  );
}

function ModalDialog(props) {
  let ref = React.useRef();
  let { modalProps } = useModal();
  let { overlayProps } = useOverlay(props, ref);
  usePreventScroll();

  return (
    <div {...overlayProps} {...modalProps} ref={ref}>
      <h3>Modal Title</h3>
      <p>Modal Content</p>
      <button onClick={props.onClose}>Close</button>
    </div>
  );
}

Popover

This code demonstrates how to create a popover using @react-aria/overlays. It includes state management for opening and closing the popover, and ensures accessibility features like preventing background scroll and proper focus management.

import { useOverlayTriggerState } from '@react-stately/overlays';
import { OverlayContainer, OverlayProvider, useOverlay, usePreventScroll, usePopover } from '@react-aria/overlays';

function PopoverExample() {
  let state = useOverlayTriggerState({});
  return (
    <OverlayProvider>
      <button onClick={() => state.open()}>Open Popover</button>
      {state.isOpen && (
        <OverlayContainer>
          <PopoverDialog onClose={state.close} />
        </OverlayContainer>
      )}
    </OverlayProvider>
  );
}

function PopoverDialog(props) {
  let ref = React.useRef();
  let { popoverProps } = usePopover(props, ref);
  let { overlayProps } = useOverlay(props, ref);
  usePreventScroll();

  return (
    <div {...overlayProps} {...popoverProps} ref={ref}>
      <h3>Popover Title</h3>
      <p>Popover Content</p>
      <button onClick={props.onClose}>Close</button>
    </div>
  );
}

Tooltip

This code demonstrates how to create a tooltip using @react-aria/overlays. It includes state management for showing and hiding the tooltip, and ensures accessibility features like proper focus management and delay handling.

import { useTooltipTriggerState } from '@react-stately/tooltip';
import { useTooltip, TooltipTrigger, Tooltip } from '@react-aria/tooltip';

function TooltipExample() {
  let state = useTooltipTriggerState({});
  return (
    <TooltipTrigger state={state} delay={300} placement="top">
      <button>Hover or focus me</button>
      <Tooltip>Tooltip Content</Tooltip>
    </TooltipTrigger>
  );
}

Other packages similar to @react-aria/overlays

react-modal

react-modal is a widely-used library for creating accessible modal dialogs in React. It provides a simple API for creating modals and ensures accessibility features like focus management and ARIA attributes. Compared to @react-aria/overlays, react-modal is more focused on modals and may not provide as comprehensive a set of overlay components.

react-popper

react-popper is a library for creating poppers (floating elements) in React. It provides a powerful positioning engine and is often used for tooltips, popovers, and dropdowns. While it offers great flexibility and control over positioning, it may require more manual setup for accessibility compared to @react-aria/overlays.

react-tooltip

react-tooltip is a library specifically for creating tooltips in React. It offers a simple API and various customization options for styling and behavior. While it is easy to use and highly customizable, it may not provide the same level of accessibility features as @react-aria/overlays.

README

@react-aria/overlays

This package is part of react-spectrum. See the repo for more details.